<template>
	<view>
		<!-- <u-navbar :is-back="false" :border-bottom="false" title-color="#fff" :background="background"></u-navbar> -->
		<view class="u-page">

			<topBg></topBg>
			<view class="u-flex u-flex-col content">
				<view class="swiper u-flex-1">
					<swiper @change="change" :indicator-dots="false" :autoplay="false" :interval="1000" :duration="1000"
						:current="current" circular>
						<swiper-item v-for="(item,index) in banner" :key="index">
							<view class="swiper-item">
								<view class="banner-title">
									<text class="t1">{{item.title}}</text>
									<text class="t2">{{item.alias}}</text>
								</view>
								<!-- <image class="num1" :src="`${imgUrl}icon${index}t.png`"></image> -->
								<!-- <image class="num2" :src="`${imgUrl}icon${index}.png`" @click="swiperJump()"></image> -->

								<view class="numlj" style="display: inline-block;" @click="jump(item.link)">
									<image style="width: 600rpx;height: 600rpx;" :src="item.cover" mode="aspectFit">
									</image>
									<view
										style="color: #009d8d ;margin-left: 200rpx;font-size: 24rpx;margin-top: 20rpx;">
										点击进入
								  <u-icon name="arrow-up" color="#009d8d"></u-icon>
									</view>
								</view>


							</view>
						</swiper-item>
					</swiper>
				</view>


				<view class="u-flex top-img">
					<view>
						<image src="/static/icon2/search.png" v-if="current !== 0" @click="swiperJump(!0)"></image>
					</view>
					<view @click="jump('/pages/mine/my-publish')">
						<image src="/static/icon2/msg.png"></image>
					</view>
				</view>

			</view>


			<view class="emailBox" @click="jump('/pages/index/msg')">
				<image src="/static/icon2/email.png" mode="widthFix" class="emailIcon"></image>
			</view>




			<view class="swiperText safe-area-inset-bottom">
				<siucat-sectors ref='sectors' @Chend='Chend'></siucat-sectors>
			</view>
			<u-mask :show="show" @click="show = false">
				<push-topics v-if="show" @publish="show = !1"></push-topics>
			</u-mask>

			<u-mask :show="showIndex">
				<view class="index-show u-flex">
					<view class="index-show-box">
						<!-- <image class="go-pay" src="/static/show-index.png" mode="widthFix"
						@click="jump('/pages/mine/account?show=1')"></image> -->
						<image class="go-pay" src="/static/show-index.png" mode="widthFix" @click="vipCharge"></image>
						<view class="u-flex">
							<image class="close" src="/static/close.png" @click="showIndex = false"></image>
						</view>
					</view>
				</view>
			</u-mask>


		</view>
		
		

		<u-tabbar :mid-button="true" :border-top="false" height="100rpx" bgColor="#67EEE4" :before-switch="beforeSwitch"
			inactive-color="#000" active-color="#fff" v-model="currentTab" :list="vuex_tabbar"></u-tabbar>



	</view>
</template>

<script>
	import $$app from '../../common/app.js';
	import topBg from '@/components/top-bg/index.vue';
	export default {
		components: {
			topBg
		},
		data() {
			return {
				tabbg: 'linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%)',
				background: {
					'background': `url(${$$app.imgUrl}Echo.png) no-repeat 50rpx calc(100% - 20rpx)`,
					'background-size': '155rpx 43rpx',
					// 'backgroundColor': '#001f3f',
				}, //导航栏背景
				datalist: ['性格测试', '感情维护', '情感表达', '情感挽回', '性格测试', '感情维护', '情感表达', '情感挽回', '性格测试', '感情维护', '情感表达', '情感挽回',
					'性格测试', '感情维护', '情感表达', '情感挽回', '性格测试', '感情维护', '情感表达', '情感挽回', '性格测试', '感情维护', '情感表达', '情感挽回',
					'性格测试', '感情维护', '情感表达', '情感挽回', '性格测试', '感情维护', '情感表达', '情感挽回', '性格测试', '感情维护', '情感表达', '情感挽回'
				],
				current: 0,
				currentTab: 0,
				show: !1,
				imgUrl: this.$app.imgUrl,
				banner: '',
				showIndex: !1
			}
		},
		methods: {
			vipCharge() {
				this.$u.api.viprRecharge({}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.timestamp,
						nonceStr: res.noncestr,
						signType: res.signtype,
						paySign: res.paysign,
						appid: res.appid,
						package: res.package,
						success: () => {
							// 支付成功=>微信更新用户信息
							this.$u.toast('支付成功')
						},
						fail: err => {
							this.$u.toast('支付失败')
						},
						complete: err => {
							this.showIndex = false
						}
					})
				})
			},
			Chend(index) {
				console.log(index)
				this.current = index % 4
			},
			change(e) {
				if (e.detail.source == 'touch') {
					this.current = e.detail.current
					this.$refs.sectors.setIndex(e.detail.current + 8, !0)
				}
			},
			beforeSwitch(e) {
				console.log(e, "url")
				let url = ''
				if (e == 2) url = '/pages/fabu/index';
				if (e == 3) url = '/pages/college/index';
				if (e == 0) url = '/pages/index/index';
				if (e == 1) url = '/pages/topics/list';
				if (e == 4) url = '/pages/mine/mine';

				// 跳转
				url && uni.switchTab({
					url: url
				})
				return false
			},
			swiperJump(focus) {
				// 轮播图点击
				this.current === 0 ?
					this.$app.jump('/pages/test/test') :
					this.$app.jump(`/pages/news/list?cate=${this.current}&focus=${focus ? 1 : 0}`)
			}
		},
		onReady() {


			this.$nextTick(() => {
				this.$refs.sectors.add(this.datalist)
			})
			if (this.vuex_user && this.vuex_user.levelId === 0) {
				// this.showIndex = !0
			}
		},

		onLoad(o) {

			const id = o.scene ? decodeURIComponent(o.scene) : ''
			this.$u.vuex('vuex_recommend', id)
			this.$u.api.getBanner({
				classify: 2
			}).then(res => this.banner = res)
		},

	}
</script>

<style lang="scss">
	// /deep/ .u-tabbar__content .u-tabbar__content__item:nth-of-type(3) .u-tabbar__content__item__text text {
	// 	color: #333;
	// 	font-weight: bold;
	// }

	// /deep/ .u-tabbar__content .u-tabbar__content__item:nth-of-type(3) .u-tabbar__content__item__text {
	// 	padding-top: 60rpx;
	// }

	// page{background: url(#{$imgUrl}/bg.png) repeat;background-size: 100%;}

	.logo {
		width: 155rpx;
		height: 43rpx;
		position: relative;
		// top: 60rpx;
		left: 40rpx;
		z-index: 999;
	}

	.content {
		position: relative;
		justify-content: center;
		width: 100%;
		top: -170rpx;

		.top-img {
			justify-content: space-between;
			padding: 0 10rpx 0 22rpx;
			position: absolute;
			top: 0rpx;
			left: 0;
			width: 100%;

			image {
				width: 128rpx;
				height: 128rpx;
				display: block;
			}
		}

		.swiper {
			width: 100%;

			swiper {
				height: 100vh;
				text-align: center;

				.swiper-item {
					height: 100%;
					position: relative;

					.numlj {
						width: 600rpx;
						height: 600rpx;
						border-radius: 20rpx;
						position: absolute;
						transform: translate(-50%, -50%);
						top: 38%;
					}

					.banner-title {
						text-align: center;

						.t1 {
							display: block;
							font-size: 40rpx;
							font-weight: bold;
							color: #333;
						}

						.t2 {
							display: block;
							font-size: 30rpx;
							padding-top: 18rpx;
						}
					}
				}

				// .num2{width: 500rpx;height: 500rpx;padding-top: 9vh;}
				// .num1{width: 370rpx;height: 140rpx;}

			}
		}

	}

	.swiperText {
		height: 200rpx;
		width: 750rpx;
		overflow: hidden;
		position: fixed;
		left: 0;
		bottom: 120rpx;
		box-sizing: content-box;
	}

	.emailBox {
		position: fixed;
		right: 30rpx;
		bottom: 350rpx;
		width: 80rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.39);
		box-shadow: 0px 0px 8rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		opacity: 1;
		z-index: 999;

		.emailIcon {
			width: 46rpx;
			height: 46rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.index-show {
		width: 100%;
		height: 100%;
		justify-content: center;

		.index-show-box {
			.go-pay {
				width: 600rpx;
				display: block;
				padding-left: 45rpx;
			}

			.close {
				width: 60rpx;
				height: 60rpx;
				display: block;
				margin: 0 auto;
			}
		}
	}
</style>
